<template>
  <div class="my_menu">
    <el-menu 
        :default-active="cur_index"
        background-color="#122042"
        text-color="#fff"
        active-text-color="#55a8fd"
        @select="menu_select">
        <template v-for="item in list">
            <el-menu-item :index="item.index">
                <i class="el-icon-menu"></i>
                <span class="index" slot="title">{{item.tit}}</span>
            </el-menu-item>
        </template>
    </el-menu>

  </div>
</template>

<script>
module.exports = {
    props:[],
    data: function() {
        return {
            list:[
                {index:"1",tit:"导航一",url:"demo.html"},
                {index:"2",tit:"导航二",url:"library.html"},
                {index:"3",tit:"导航三",url:"aa3.html"},
                {index:"4",tit:"导航四",url:"aa4.html"},
                {index:"5",tit:"导航五",url:"aa5.html"},
                {index:"6",tit:"导航六",url:"aa6.html"},
                {index:"7",tit:"导航七",url:"aa7.html"}
            ],
            cur_index:"1",
        }
    },
    mounted: function() {
        this.cur_index = GetQueryString('index');
    },
    methods: {
        menu_select:function (index,indexPath) {
            console.log(index);
            this.cur_index = index;
            var cur_indexPath 
            this.list.forEach(function (item) {
                if (item.index==index) {    
                    cur_indexPath = item.url
                }
                return false
            })
            window.location.href=cur_indexPath+'?index='+index
        },
    }
}
</script>
